<template>
  <div class="main">
    <div class="top">
      <van-icon
        @click="wode()"
        class="arrowLeft"
        style="top: 10px"
        name="arrow-left"
        color="pink"
        size="30"
      />
      <van-tabs class="zuo" v-model="active">
        <div class="box">
          <van-tab class="pin" title="作品"></van-tab>
          <van-tab class="pin" title="食谱"></van-tab>
          <van-tab class="pin" title="问答"></van-tab>
        </div>
      </van-tabs>
    </div>

    <div class="bottom">
      <span>0个作品</span>
      <span>0个食谱</span>
      <span>0个问答</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: 1,
      }
    },
     methods: {
      wode() {
        this.$router.push({
          path:'/wode'
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
.main{
  background-color: #f5f7f9;
  height: 681px;
}
.top {
  background-color: #fff;
  display: flex;
  height: 45px;
  .arrowLeft {
    padding-left: 10px;
  }
  .zuo {
    .box {
      width: 260px;
      display: flex;
      margin-left: 40px;
      display: flex;
      .pin {
        justify-content: space-between;
        text-align: center;
        width: 65px;
        line-height: 44px;
        height: 44px;
        font-size: 16px;
      }
    }
  }
}
.bottom{
  
  margin: 10px auto;
  font-size: 12px;
  text-align: center;
  color: #999;
  span{
    margin-right: 7px;
  }
}
</style>